<template>
  <div class="cart-container">
    <Tips></Tips>
    <!-- 商品列表 -->
    <van-checkbox-group v-model="result" :disabled="stepperStatus">
      <van-checkbox
        :name="item.id"
        v-for="item in cartList"
        :key="item.id"
        @click="checkChange(item)"
      >
        <van-swipe-cell>
          <!-- 商品卡片 -->
          <van-card
            :num="item.number"
            :price="item.market_price"
            :title="item.goods_name"
            :thumb="item.list_pic_url"
          />
          <!-- 步进器 -->
          <van-stepper
            v-model="item.number"
            theme="round"
            button-size="22"
            disable-input
            v-show="stepperStatus"
            @change="stepperChange(item)"
          />
          <template #right>
            <van-button
              square
              text="删除"
              type="danger"
              class="delete-button"
              @click="deleteGood(item.product_id)"
            />
          </template>
        </van-swipe-cell>
      </van-checkbox>
    </van-checkbox-group>
    <!-- 提交订单兰 -->
    <van-submit-bar
      :price="cartTotal.checkedGoodsAmount * 100"
      button-text="提交订单"
      @submit="onSubmit"
    >
      <van-checkbox v-model="checkedAll" :disabled="stepperStatus"
        >全选</van-checkbox
      >
      <template #tip>
        累计共{{ cartTotal.checkedGoodsCount }}件商品，可点击
        <van-button
          :color="stepperStatus ? '#2ed573' : '#7232dd'"
          size="small"
          @click="btnClick"
          >{{ stepperStatus ? '完成编辑' : '编辑' }}</van-button
        >
        进行商品数量修改
      </template>
    </van-submit-bar>
  </div>
</template>

<script>
// 导入Tips组件
import Tips from '@/components/Tips.vue'
// 导入getCartListAPI接口
import { getCartListAPI } from '@/api/getCartListAPI.js'
// 导入checkChangeAPI接口
import { checkChangeAPI } from '@/api/checkChangeAPI.js'
// 导入stepperChangeAPI接口
import { stepperChangeAPI } from '@/api/stepperChangeAPI.js'
// 导入deleteGoodAPI接口
import { deleteGoodAPI } from '@/api/deleteGoodAPI.js'
export default {
  name: 'Cart',
  components: {
    Tips
  },
  data() {
    return {
      result: [],
      // 商品全选
      checked: false,
      // 购物车全部商品信息
      cartList: [],
      // 商品总数量和总价格
      cartTotal: {},
      // 步近期侠士隐藏状态
      stepperStatus: false
    }
  },
  methods: {
    // 提交订单
    onSubmit() {},
    // 获取购物车商品列表信息
    async getCartList() {
      const { data: res } = await getCartListAPI()
      if (res.errno !== 0) {
        return this.$toast.fail('获取购物车商品列表失败')
      }
      this.responseData(res)
    },
    // 获取后台信息
    responseData(res) {
      // console.log(res)
      this.cartList = res.data.cartList
      this.cartTotal = res.data.cartTotal
      // 先清空一下result，防止后面获取的时候追加元素时旧的数据还在，导致混乱
      this.result = []
      this.cartList.map((item) => {
        if (item.checked === 1) this.result.push(item.id)
      })
    },
    // 监听复选框状态的变化
    async checkChange(item) {
      if (this.stepperStatus) {
        return
      }
      console.log(item)
      const isChecked = item.checked === 1 ? 0 : 1
      const { data: res } = await checkChangeAPI(isChecked, item.product_id)
      if (res.errno !== 0) {
        return
      }
      // console.log(res)
      this.responseData(res)
    },
    // 点击编辑按钮触发该函数
    btnClick() {
      this.stepperStatus = !this.stepperStatus
    },
    // 步进器值发生变化时触发该函数
    async stepperChange(item) {
      // console.log(item)
      const { data: res } = await stepperChangeAPI(
        item.goods_id,
        item.id,
        item.number,
        item.product_id
      )
      // console.log(res)
      if (res.errno !== 0) {
        return
      }
      this.responseData(res)
    },
    // 删除商品
    async deleteGood(productId) {
      console.log('删除')
      const { data: res } = await deleteGoodAPI(productId.toString())
      console.log(res)
      if (res.errno !== 0) {
        return this.$toast.fail('删除失败')
      }
      this.responseData(res)
    }
  },
  computed: {
    // 全选按钮
    checkedAll: {
      get() {
        return this.result.length === this.cartList.length
      },
      // val就是将要修改为的值
      async set(val) {
        // console.log(val)
        const isChecked = val ? 1 : 0
        const idsArr = []
        this.cartList.map((item) => {
          idsArr.push(item.product_id)
        })
        // console.log(this.cartList)
        const { data: res } = await checkChangeAPI(isChecked, idsArr.join(','))
        if (res.errno !== 0) {
          return this.$toast.fail('操作失败')
        }
        // console.log(res)
        this.responseData(res)
      }
    }
  },
  created() {
    this.getCartList()
  }
}
</script>

<style lang="less" scoped>
.van-checkbox-group {
  padding-bottom: 302px;
  background-color: #fff;
  .van-checkbox {
    padding: 15px 20px;
    border-bottom: 1px solid #ccc;
    /deep/.van-checkbox__label {
      flex: 1;
      background-color: transparent;
    }
  }
}
.van-submit-bar {
  bottom: 100px;
  border-bottom: 1px solid #ccc;
  .van-button--small {
    vertical-align: middle;
  }
}

.van-stepper {
  text-align: right;
}

.van-button--square {
  height: 100%;
}
</style>
